Tengo una presentación de diapositivas:
<div (mousedown)="onMouseDown($event)" (mousemove)="onMouseMove($event)" (mouseup)="onMouseUp($event)"> <div class="swiper-wrapper"> <div *ngFor="let item of items; index as i;"> <custom-slide class="custom-slide"></custom-slide> </div> </div> </div> Los métodos onMouseDown , onMouseMove y onMouseUp son para moverlo con el mouse.
El componente Angular custom-slide escucha los eventos de click y muestra un cuadro de diálogo al hacer clic.
Pero el problema es que cada vez que termina de arrastrar la presentación de diapositivas, siempre se envía un evento de click a un componente custom-slide , por lo tanto, aparece un cuadro de diálogo, que es lo que quiero evitar.
Traté de escribir onMouseUp como se muestra a continuación, pero no funciona
onMouseUp() { this.mouseIsDown = false; const elements = document.getElementsByClassName("custom-slide"); if(this.isScrolling) { for(let i = 0; i < elements.length; i++){ elements[i].addEventListener("click", this.preventClick); } } else { for(let i = 0; i < elements.length; i++){ elements[i].removeEventListener("click", this.preventClick); } } this.isScrolling = false; } preventClick(event) { event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation(); } Aunque en el método preventClick todo, la diapositiva aún puede recibir el evento de click y mostrar el cuadro de diálogo...
¿Alguien podría enseñarme cómo prevenirlo?
¡Gracias!
Depende ... tal vez pueda capturar el evento antes de que el controlador de eventos de clic de deslizamiento personalizado lo reciba si el evento de clic está en fase burbujeante. luego puede agregar su oyente de prevención de clics en la fase de captura que viene antes de la fase de burbujeo
elements[i].addEventListener('click', this.preventClick, true);especifique el tercer parámetro como verdadero (useCapture)
Usé el siguiente enfoque y resolvió el problema:
en el componente de presentación de diapositivas, que es donde se encuentran las funciones mouseUp y mouseMove , mantenga una variable boolean que indique si el usuario está arrastrando.
Luego, comparta esta variable con el componente de diapositiva a través de Emitter o de otras formas.
Lo hice colocando tanto las variables como las funciones en una clase de controlador, para poder compartir una instancia de la clase entre los dos componentes.
Luego, en la función de escucha de click del componente de diapositiva, verifique si la variable es verdadera, lo que significa que el usuario estaba arrastrando antes de soltar el botón izquierdo del mouse.
En caso afirmativo, eso significa que queremos ignorarlo, porque el usuario estaba arrastrando en lugar de hacer clic, y el oyente de clic debería regresar directamente y no hacer nada.
Si no, eso significa que el usuario hizo clic deliberadamente, entonces la función de escucha debería seguir terminando su trabajo.